<template>
  <div class="winning-box" @click="openHistoryPopup">
    <div class="periods">{{ periods }}期开奖结果</div>
    <div class="result-box">
      <ul class="winning-box-number">
        <li v-for="(item, index) in renderList" :key="index" class="all-center" style="margin-right: 3px">
          <div class="box all-center">
            <p class="number">{{ item.number }}</p>
          </div>
        </li>
      </ul>
      <arrowAnimate ref="arrowAnimate" color="#fff" :style="{ 'margin-left': '0.08rem' }" />
    </div>
  </div>
</template>

<script>
import arrowAnimate from '@components/arrow-animate.vue'
import { mapState } from 'pinia'
import { GAME_STATUS_CODE } from '@/enum'
import { useGameStore } from '@/stores/game'
import { findHistoryPage } from '@/api'
import { $utils } from '@utils'

export default {
  name: 'QXCWinNumber',
  components: {
    arrowAnimate,
  },
  props: {
    list: '',
  },
  data() {
    return {
      lastPeriodsResult: [], // 最新已开奖号码
      periods: '',
    }
  },
  computed: {
    ...mapState(useGameStore, {
      drawingStatus: (state) => state.drawingStatus,
      currentGame: (state) => state.currentGame,
    }),
    // 监听咪牌时间
    renderList() {
      let list = this.lastPeriodsResult
      return list
    },
  },

  watch: {
    drawingStatus: {
      handler(newValue) {
        // console.log(123123, newValue);
        // 当 code == 40时, 说明已经开奖, 要更新开奖数据
        if (newValue.code === GAME_STATUS_CODE.kaijiang.code) {
          this.fetchHistory()
        }
      },
      deep: true,
    },
  },
  methods: {
    async fetchHistory() {
      // 当首次载入没有展开开奖历史记录时 请求一次接口，之后用开奖历史记录列表传过来的数据
      let query = {
        current: 1,
        size: 10,
        lotteryCode: this.currentGame,
      }
      const {
        data: { records },
      } = await findHistoryPage(query)
      if (records?.length) {
        let { drawingResult, periodsNumber } = records.find((item) => item.drawingResult) // 最新一期开奖数据
        this.lastPeriodsResult = this.handleList(drawingResult)
        this.periods = periodsNumber
      }
    },
    handleList(drawingResult) {
      let numArr = drawingResult
      if ($utils.isEmpty(numArr)) return []
      if (!Array.isArray(numArr)) {
        numArr = drawingResult.split(',')
      }
      let arr = numArr.concat([])
      // let sum = numArr.reduce((prev, current) => Number(prev) + Number(current), 0); // 等号右边的得数
      // arr.push(sum);
      let newArr = []
      arr.forEach((item) => {
        let obj = {}
        obj.number = item
        newArr.push(obj)
      })
      return newArr
    },

    openHistoryPopup() {
      this.$refs.arrowAnimate.rotateArrow()
      this.$emit('openHistoryPopup')
    },
  },
  created() {
    this.fetchHistory()
  },
}
</script>

<style scoped lang="less">
.winning-box {
  width: 100%;
  .periods {
    height: 20px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    font-family: 'DIN';
  }

  &-number {
    display: flex;
    align-items: center;
    font-family: PingFang SC;
    font-weight: 400;
    .num-symbol {
      color: #008ddc;
      font-size: 15px;
      padding: 0 4px;
      box-sizing: border-box;
    }
    .box {
      width: 23px;
      height: 23px;
      position: relative;
      border: 1.5px solid #9180f6;
      border-radius: 50%;
      background-color: #fff;
      //background: url('@/assets/img/game/win_number_result_bg.png') center center no-repeat;
      background-size: contain;

      .number {
        color: #6950FF;
        font-size: 13px;
      }
    }
  }
}
.result-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
